<template>
  <div>
    <!-- 顶部导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索用户框 -->
    <div class="search">
      <el-input
        v-model="inputval"
        class="w-50 m-2"
        size="large"
        placeholder="请输入用户名"
      />
      <el-button id="search" :icon="Search" @click="search" />
      <!-- 添加用户按钮 -->
      <el-button class="btn" type="primary" @click="addUser"
        >添加用户</el-button
      >
    </div>
    <!-- 添加用户弹出框 -->
    <el-dialog v-model="addialogVisible" title="添加用户" width="50%">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="手机" prop="tel">
          <el-input v-model="ruleForm.tel" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addCancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="addConfirm(ruleFormRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits } from "vue";
import { Search } from "@element-plus/icons-vue";
import { reactive, ref, defineComponent, defineExpose, toRef } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { defineProps } from "vue";
import { ElMessage } from "element-plus";
import service from "../../until/service";

const data = defineProps({
  obj: {
    type: Object,
  },
});
const datausers = data;
const emits = defineEmits(["search"]);
const inputval = ref("");
const addialogVisible = ref(false);
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  username: "",
  password: "",
  email: "",
  tel: "",
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入用户名!", trigger: "blur" },
    {
      min: 3,
      max: 8,
      message: "用户名长度为3-8个字符之间!",
      trigger: ["change", "blur"],
    },
  ],
  password: [
    { required: true, message: "请输入密码!", trigger: "blur" },
    {
      min: 3,
      max: 8,
      message: "用户名长度为3-8个字符之间!",
      trigger: ["change", "blur"],
    },
  ],
  email: [
    { required: true, message: "请输入邮箱!", trigger: "blur" },
    {
      type: "email",
      message: "请填写正确的邮箱!",
      trigger: ["blur", "change"],
    },
  ],
  tel: [
    { required: true, message: "请输入手机号!", trigger: ["blur", "change"] },
    {
      trigger: "blur",
      validator: (rule, value, callback) => {
        var passwordreg =
          /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
        console.log(passwordreg.test(value));
        if (!passwordreg.test(value)) {
          callback(new Error("请输入正确的手机号码哦!"));
        } else {
          callback();
        }
      },
    },
  ],
});

//搜索用户
const search = () => {
  service
    .get("users", {
      params: { query: inputval.value, pagenum: 1, pagesize: 5 },
    })
    .then((res) => {
      emits("search", res.data.data);
    })
    .catch((error) => console.log(error));
};

const addUser = () => {
  addialogVisible.value = true;
};
//确认添加
const addConfirm = (formEl) => {
  formEl.validate((val) => {
    if (!val) return;
    service
      .post("users", {
        username: ruleForm.username,
        password: ruleForm.password,
        email: ruleForm.email,
        mobile: ruleForm.tel,
      })
      .then((res) => {
        addialogVisible.value = false;
        datausers.obj.push(res.data.data);
        if (res.data.meta.status == 201) {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
        } else {
          ElMessage({
            message: "添加失败",
            type: "error",
          });
        }
        formEl.resetFields();
      })
      .catch((error) => console.log(error));
  });
};
//取消添加
const addCancel = (formEl) => {
  addialogVisible.value = false;
  formEl.resetFields();
};
</script>
<style scoped>
#search {
  height: 40px;
}
.w-50 {
  width: 250px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.btn {
  margin-left: 10px;
  height: 38px;
}
</style>